
import { Image, InfiniteScroll, List } from 'antd-mobile'
import { fetchListApi, ListRes } from '@/pages/apis/list'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'

interface Props{
  channleId: string
}
const HomeList = (props: Props) => {
  const {channleId} = props;
  const[listRs, setListRes] = useState<ListRes>({
    pre_timestamp: ''+new Date().getTime(),
    results: []
  });
  useEffect(() => {
    const getList = async () => {
      const res=await fetchListApi({
        channel_id: channleId,
        timestamp:''+new Date().getTime()
      })
      setListRes(res.data.data)
    }
    getList();
  },[])
  const [hasMore, setHasMore] = useState(true)
  const loadMore = async () => {
  console.log('loadMore');
  const res = await fetchListApi({
    channel_id: channleId,
    timestamp: listRs.pre_timestamp
  })
  if (res.data.data.results.length === 0) {
    setHasMore(false)
    return
  }
  setListRes({
    pre_timestamp: res.data.data.pre_timestamp,
    results: [...listRs.results, ...res.data.data.results]
  })
  }
  const navigate=useNavigate();
  const gotoDetail = (id: string) => {
    navigate(`/detail/?id=${id}`)
    console.log(id);
  }
  return (
    <>
      <List>
        {listRs.results.map((item) => (
          <List.Item
          onClick={()=>gotoDetail(item.art_id)}
            key={item.art_id}
            prefix={
              <Image
                src={item.cover.images?.[0]}
                style={{ borderRadius: 20 }}
                fit="cover"
                width={40}
                height={40}
              />
            }
            description={item.pubdate}
            >
            {item.title}
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={10}></InfiniteScroll>
    </>
  )
}

export default HomeList
